<template>
  <!-- 搜索页面 -->
  <!-- 搜索框 -->
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="苏东坡险上断头台"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
  <div class="container">
    <!-- 热门搜索 -->
    <div class="hot-search">
      <span class="search-head">热门搜索</span>
      <div class="type">
        <span
          v-for="(item, index) in hotSearch[0]"
          :key="index"
          @click="tosearch(index)"
          >{{ item }}</span
        >
      </div>
      <div class="topic">
        <span v-for="(item, index) in hotSearch[1]" :key="index">
          {{ item }}
          <em></em>
        </span>
      </div>
    </div>
    <!-- 历史搜索 -->
    <div class="hsitory-sub">
      <span class="search-head">历史搜索</span>
      <span class="del-history" @click="onDel"></span>
    </div>
    <div class="history">
      <span v-for="(item, index) in history" :key="index">{{ item }}</span>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    //搜索框功能
    const value = ref("");
    let preHistory = ["如何克服社交焦虑", "艺术与设计入门"];
    const history = ref(preHistory);
    const onSearch = (val) => pushHistory(val);
    //取消搜索，返回上一页

    const router = useRouter();
    // const route = useRoute();
    const onCancel = () => {
      router.back();
    };
    //热门搜索

    let hotype = ["论语", "沟通力", "领导力"];
    let hotopic = ["成功,可以复制吗?", "樊登定制听读笔记本", "读完不忘的秘密"];
    const hots = [hotype, hotopic];
    const hotSearch = ref(hots);
    const tosearch = (val) => {
      value.value = hotype[val];
    };
    // 搜素历史
    //添加搜索记录
    const DisplayHistory = () => history;
    const pushHistory = (val) => {
      history.value.push(val);
      value.value = "";
    };
    //删除搜索记录
    const onDel = () => (history.value = []);
    return {
      value,
      hotSearch,
      history,
      onSearch,
      onCancel,
      DisplayHistory,
      onDel,
      tosearch,
    };
  },
};
</script>
<style lang="less" scoped>
/deep/.van-search__action {
  font-size: 14px;
  color: rgb(0, 0, 0);
  font-weight: 700;
}
/deep/.van-search__content {
  border-radius: 20px;
}
.container {
  padding: 14px;
  font-size: 13px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  .search-head {
    display: block;
    font-size: 13px;
    color: #a3a3a3;
    line-height: 13px;
    font-weight: 700;
    margin-bottom: 18px;
  }
  .topic,
  .type {
    display: flex;
    flex-wrap: wrap;
    span {
      margin-right: 12px;
      margin-bottom: 14px;
      border-radius: 14px;
      padding: 0 13px;
      line-height: 28px;
    }
  }
  .type {
    span {
      background: #f5f6f8;
    }
  }
  .topic {
    span {
      position: relative;
      em {
        width: 15px;
        height: 14px;
        background: url("../assets/imgs/searchPage_slices/ss-2.png") no-repeat
          center;
        background-size: 100% 100%;
        position: absolute;
        top: -5px;
        right: -4px;
      }
      border: 1px solid #e4de76;
    }
  }
  .hsitory-sub {
    margin-top: 19px;
    display: flex;
    justify-content: space-between;
    .del-history {
      width: 13px;
      height: 13px;
      background: url("../assets/imgs/searchPage_slices/ss-3.png") center;
      background-size: 100% 100%;
    }
  }
  .history {
    flex-wrap: wrap;
    display: flex;
    span {
      margin-right: 12px;
      margin-bottom: 14px;
      border-radius: 14px;
      padding: 0 13px;
      line-height: 28px;
      background: #f5f6f8;
    }
  }
}
</style>
